<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 60px;
            height: 30px;
            margin-left: 10px;
        }
    </style>
    <script>
        function initYear(){
            var year = document.getElementById("year");
            var date = new Date();
            for (var i = date.getFullYear()-50; i < date.getFullYear(); i++) {
                var y = document.createElement("option");
                y.innerHTML = i;
                y.value = i;
                year.appendChild(y);
            }
        }
        function initMonth(){
            var month = document.getElementById("month");
            for (var i = 1; i < 13; i++) {
                var m = document.createElement("option");
                m.innerHTML = i;
                m.value = i;
                month.appendChild(m);
            }
        }
        function initDay(){
            var dayNumber = [0,31,28,31,30,31,30,31,31,30,31,30,31];
            var year = parseInt(document.getElementById("year").value);
            var number = parseInt(document.getElementById("month").value);
            if (year%4==0 && year%100!=0){
                dayNumber[2] = 29;
            }
            var day = document.getElementById("day");
            day.innerHTML = "";
            for (var i = 1; i <= dayNumber[number]; i++) {
                var option = document.createElement("option");
                option.innerHTML = i;
                option.value = i;
                day.appendChild(option);
            }
        }

        window.onload = function (){
            initYear();
            initMonth();
            initDay();
        }
    </script>
</head>
<body>
    <select id="year" onchange="initDay()">
    </select>年
    <select id="month" onchange="initDay()">
    </select>月
    <select id="day">
    </select>日
</body>
</html>